<template>
	<view class="Global">
		<!-- 背景图片铺满 -->
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>


		<!-- 搜索栏 -->
		<!-- <view class="searchContentOut">
			<view class="searchContent">
				<input type="text" value="111" class="searchInput" />
				<view class="searchBg">
					<image src="../../../static/gongzuotai/sousuo@2x.png" class="searchImg" mode=""></image>
				</view>
			</view>
		</view> -->
		<searchInput :inputcontent="inputcontent" @sendData="getInputValue"></searchInput>







		<!-- 筛选栏 -->
		<view class="searchPickerContent">

			<view class="searchPickerContentBg">
				<!--				<text class="searchPickerText">2020-09</text>-->
				<!--				<image class="searchPickerImg" src="../../../static/gongzuotai/xia_jiantou.png" mode=""></image>-->
				<picker mode="date" :value="monthStart" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="searchPickerText" v-if="monthStart==''">选择开始时间</view>
					<view class="searchPickerText" v-else>{{monthStart}}</view>
				</picker>
			</view>

			<view class="searchPickerContentBg">
				<!--				<text class="searchPickerText">2023-09</text>-->
				<!--				<image class="searchPickerImg" src="../../../static/gongzuotai/xia_jiantou.png" mode=""></image>-->
				<picker mode="date" :value="monthEnd" :start="startDate" :end="endDate" @change="bindEndDateChange">
					<view class="searchPickerText" v-if="monthEnd==''">选择结束时间</view>
					<view class="searchPickerText" v-else>{{monthEnd}}</view>
				</picker>
			</view>

		</view>




		<!-- 选项卡 切换开始 -->
		<view class="SwitchTabOut">


			<view class="SwitchTabOutInner">
				<!-- 	选项卡开始 -->

				<view class="head-nav">
					<view :class="navIndex==0?'activite':''" @click="checkIndex(0)">
						<text>计件</text>

					</view>
					<view :class="navIndex==1?'activite':''" @click="checkIndex(1)">
						<text>月薪</text>

					</view>
<!--					<view :class="navIndex==2?'activite':''" @click="checkIndex(2)">-->
<!--						<text>计时</text>-->

<!--					</view>-->


				</view>
				<!-- 选项卡结束 -->
				<!-- 底部下划线开始 -->
				<view class="head-nav-line">
					<view class="head-nav-line1" @click="checkIndex(0)">
						<text :class="navIndex==0?'line':''"></text>

					</view>
					<view class="head-nav-line1" @click="checkIndex(1)">
						<text :class="navIndex==1?'line':''"></text>

					</view>
<!--					<view class="head-nav-line1" @click="checkIndex(2)">-->
<!--						<text :class="navIndex==2?'line':''"></text>-->

<!--					</view>-->


				</view>
				<!-- 底部下划线结束 -->



				<!-- 计件开始 -->



				<view class="contentCountTimeNew">
					<view class="contentCenterInnerListItemContent2">
						<view class="contentCountTime" v-if="navIndex==0">
							<!-- 列表标题 -->

							<view class="titleStyleNew">
								<text class="titleStyleNumNew">序号</text>
								<text class="titleStyleNumNew">工号</text>
								<text class="titleStyleNumNew">姓名</text>
								<text class="titleStyleNumNew">金额</text>
							</view>

							<scroll-view scroll-y="true" class="titleStyleTitleNew" @scrolltolower="scrolltolowerClick">
								<!-- 列表内容 -->
								<view v-for="(item,index) in jjListData" @click="listItemClick(item)">
									<view class="titleStyleListNew" v-if="index%2==0">
										<text class="titleStyleNumListNew">{{item.num}}</text>
										<text class="titleStyleNumListNew">{{item.userName}}</text>
										<text class="titleStyleNumListNew">{{item.nickName}}</text>
										<text class="titleStyleNumListNew">{{item.amounts}}</text>
									</view>
									<view class="titleStyleListElseNew" v-if="index%2!=0">
										<text class="titleStyleNumListNew">{{item.num}}</text>
										<text class="titleStyleNumListNew">{{item.userName}}</text>
										<text class="titleStyleNumListNew">{{item.nickName}}</text>
										<text class="titleStyleNumListNew">{{item.amounts}}</text>
									</view>
								</view>

							</scroll-view>

						</view>
					</view>
				</view>

				<!-- 计件结束 -->
				<!-- 月薪开始 -->
				<view class="contentCountTimeNew">
					<view class="contentCenterInnerListItemContent2">
						<view class="contentCountTime" v-if="navIndex==1">
							<!-- 列表标题 -->

							<view class="titleStyleNew">
								<text class="titleStyleNumNew">序号</text>
								<text class="titleStyleNumNew">工号</text>
								<text class="titleStyleNumNew">姓名</text>
								<text class="titleStyleNumNew">金额</text>
							</view>

							<scroll-view scroll-y="true" class="titleStyleTitleNew" @scrolltolower="scrolltolowerClick">
								<!-- 列表内容 -->
								<view v-for="(item,index) in jjListData" @click="listItemClick(item)">
									<view class="titleStyleListNew" v-if="index%2==0">
										<text class="titleStyleNumListNew">{{item.num}}</text>
										<text class="titleStyleNumListNew">{{item.userName}}</text>
										<text class="titleStyleNumListNew">{{item.nickName}}</text>
										<text class="titleStyleNumListNew">{{item.amounts}}</text>
									</view>
									<view class="titleStyleListElseNew" v-if="index%2!=0">
										<text class="titleStyleNumListNew">{{item.num}}</text>
										<text class="titleStyleNumListNew">{{item.userName}}</text>
										<text class="titleStyleNumListNew">{{item.nickName}}</text>
										<text class="titleStyleNumListNew">{{item.amounts}}</text>
									</view>
								</view>

							</scroll-view>

						</view>
					</view>
				</view>
				<!-- 月薪结束 -->
				<!-- 计时开始 -->
				<view class="contentCountTimeNew">
					<view class="contentCenterInnerListItemContent2">
						<view class="contentCountTime" v-if="navIndex==2">
							<!-- 列表标题 -->

							<view class="titleStyleNew">
								<text class="titleStyleNumNew">序号</text>
								<text class="titleStyleNumNew">工号</text>
								<text class="titleStyleNumNew">姓名</text>
								<text class="titleStyleNumNew">金额</text>
							</view>

							<scroll-view scroll-y="true" class="titleStyleTitleNew" @scrolltolower="scrolltolowerClick">
								<!-- 列表内容 -->
								<view v-for="(item,index) in jjListData" @click="listItemClick(item)">
									<view class="titleStyleListNew" v-if="index%2==0">
										<text class="titleStyleNumListNew">{{item.num}}</text>
										<text class="titleStyleNumListNew">{{item.userName}}</text>
										<text class="titleStyleNumListNew">{{item.nickName}}</text>
										<text class="titleStyleNumListNew">{{item.amounts}}</text>
									</view>
									<view class="titleStyleListElseNew" v-if="index%2!=0">
										<text class="titleStyleNumListNew">{{item.num}}</text>
										<text class="titleStyleNumListNew">{{item.userName}}</text>
										<text class="titleStyleNumListNew">{{item.nickName}}</text>
										<text class="titleStyleNumListNew">{{item.amounts}}</text>
									</view>
								</view>

							</scroll-view>

						</view>
					</view>
				</view>
				<!-- 计时结束 -->
			</view>

		</view>
		<!-- 选项卡 切换结束 -->






	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
	import searchInput from '@/components/searchInput.vue'


	import {
		userSalaryByPieceworks,userSalaryByMonthlyPay
	} from '@/pages/api/api.js'


	export default {
		components: {
			MyNav,
			bgImage,
			searchInput
		},

		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				title: '员工薪资',
				isback: true,
				inputcontent: '请输入工号',

				// 切换选项卡
				isActive: true,
				textColor: '#0081FF',

				navIndex: 0,

				jjListData: [],
				yxListData: [],
				jsListData: [],




				sizeManagerData: {
					storeId: '',
					tenantId: '',
					pageNum: '1', // 当前页
					pageSize: '10', //页码大小
					userId: '',
					salaryCategory: '' //薪资类型 传不同类型，获取对应的薪资列表
				},
				monthStart: this.getFirstDayOfMonth(),
				monthEnd: this.getLastDayOfMonth(),
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			const app = getApp();
			this.sizeManagerData.storeId = app.globalData.storeId
			this.sizeManagerData.tenantId = app.globalData.tenantId
      this.sizeManagerData.salaryCategory = 'pieceworks'
      this.sizeManagerData.createTimeStart = this.monthStart
      this.sizeManagerData.createTimeEnd = this.monthEnd
			this.loadData()
		},

		methods: {
			// 重置数据
			reUpload() {
				// 重置数据
				this.jjListData = []
				// 表示自动刷新本页
				this.loadData()
			},

			// 加载数据
			loadData() {

				const app = getApp();
				this.sizeManagerData.storeId = app.globalData.storeId
				this.sizeManagerData.tenantId = app.globalData.tenantId
				// 重置
				this.sizeManagerData.pageNum = 1;
        this.jjListData = []
        if(this.sizeManagerData.salaryCategory == 'pieceworks'){
          userSalaryByPieceworks(this.sizeManagerData).then((res) => {
            if (res.code == 200) {
              this.totalPage = (res.total / this.sizeManagerData.pageSize)
              if (this.totalPage > 1) {
                ++this.totalPage
              }
              // 计算总页数
              this.totalPage = parseInt(this.totalPage)

              this.jjListData = [...this.jjListData, ...res.rows]


              //获取数据的时候foreach循环一下，添加show=false
              this.jjListData.forEach((item, index) => {
                this.$set(item, 'num', index + 1)
              })
            }
            console.log('2211获取数据成功', res, this.totalPage, this.jjListData.length);
          }).catch((err) => {
            // console.error('11获取数据失败', err);
          });
        }

        if(this.sizeManagerData.salaryCategory == 'basic_salary'){
          userSalaryByMonthlyPay(this.sizeManagerData).then((res) => {
            if (res.code == 200) {
              this.totalPage = (res.total / this.sizeManagerData.pageSize)
              if (this.totalPage > 1) {
                ++this.totalPage
              }
              // 计算总页数
              this.totalPage = parseInt(this.totalPage)

              this.jjListData = [...this.jjListData, ...res.rows]


              //获取数据的时候foreach循环一下，添加show=false
              this.jjListData.forEach((item, index) => {
                this.$set(item, 'num', index + 1)
              })
            }
            console.log('2211获取数据成功', res, this.totalPage, this.jjListData.length);
          }).catch((err) => {
            // console.error('11获取数据失败', err);
          });
        }

			},

			// 滚动条滚动底部
			scrolltolowerClick(e) {
				if (this.totalPage > this.sizeManagerData.pageNum) {
					++this.sizeManagerData.pageNum
					userSalaryByPieceworks(this.sizeManagerData).then((res) => {
						// console.log('11获取数据成功', res);
						// console.log('221滚动条触底', res.code, (res.code == 200));
						if (res.code == 200) {
							// 列表累计
							this.jjListData = [...this.jjListData, ...res.rows]

							//获取数据的时候foreach循环一下，添加num
							this.jjListData.forEach((item, index) => {
								this.$set(item, 'num', index + 1)
							})
						}
					}).catch((err) => {
						// console.error('11获取数据失败', err);
					});
				} else {
					uni.showToast({
						title: '已加载完全部数据',
						icon: 'none'
					});
				}
			},
			listItemClick(item) {
				let data = {
					userName: item.userName,
					userId: item.userId,
					monthStart: this.monthStart,
					monthEnd: this.monthEnd

				}
				uni.navigateTo({
					url: '/pages/employeeSalary/employeeSalary/employeeSalaryDetail?data=' + encodeURIComponent(
						JSON.stringify(data)),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			checkIndex(index) {
				console.log(index)
				this.navIndex = index;
				// 切换tab ，重新获取值,需重新设置薪资类型等参数

				if (index == 0) {
          // 计件类型
          this.sizeManagerData.salaryCategory = 'pieceworks'
				} else if (index == 1) {
					// 月薪类型
					this.sizeManagerData.salaryCategory = 'basic_salary'
				} else {
          // 计时类型
          this.sizeManagerData.salaryCategory = 'working_hours'

				}
				this.reUpload()

			},
			// 获取输入框的值
			getInputValue(e) {
				console.log('获取输入框的值', e);
        this.sizeManagerData.nickName = e
        // 重置数据
        this.jjListData = []
        // 表示自动刷新本页
        this.loadData()
			},
			bindDateChange: function(e) {
				this.monthStart = e.detail.value
        this.sizeManagerData.createTimeStart = this.monthStart
        if(this.monthEnd!=undefined ||this.monthEnd!=null||this.monthEnd!=''){
          this.jjListData=[]
          this.loadData()
        }
			},
			bindEndDateChange: function(e) {
				this.monthEnd = e.detail.value
        this.sizeManagerData.createTimeEnd = this.monthEnd
        if(this.monthStart!=undefined ||this.monthStart!=null||this.monthStart!=''){
          this.jjListData=[]
          this.loadData()
        }
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					month = month + 1;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getFirstDayOfMonth() {
        let date = new Date();
        date.setDate(1);
        return date.toISOString().slice(0, 10);
			},
			getLastDayOfMonth() {
        return new Date().toISOString().slice(0, 10);
			}
		}
	}
</script>

<style>
	.contentCenterInnerListItemContent2 {

		display: flex;
		justify-content: center;
		flex-direction: column;

	}

	.titleStyleNumList {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 100%;
		font-size: 24rpx;
		color: #333333;

		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
	}

	.titleStyleNumListNew {
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 200rpx;
		height: 100%;
		font-size: 24rpx;
		color: #333333;

		text-align: left;
		font-style: normal;
		text-transform: none;
		white-space: nowrap;
	}

	.titleStyleSerialList {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 100%;
		font-size: 24rpx;
		color: #333333;

		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
	}

	.titleStyleNameList {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 100%;
		font-size: 24rpx;
		color: #333333;

		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;



	}

	.titleStyleNum {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 100%;
		font-size: 24rpx;
		color: #FFFFFF;

		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
	}

	.titleStyleNumNew {
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 200rpx;
		height: 100%;
		font-size: 24rpx;
		color: #FFFFFF;

		text-align: center;
		font-style: normal;
		text-transform: none;

		white-space: nowrap;
	}

	.titleStyleSerial {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 100%;
		font-size: 24rpx;
		color: #FFFFFF;

		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
	}

	.titleStyleName {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 100%;
		font-size: 24rpx;
		color: #FFFFFF;


		font-style: normal;



	}

	.line {
		width: 690rpx;
		height: 1rpx;
		background: #F9FCFF;



	}

	.titleStyleTitle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 690rpx;
		height: 560rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 30rpx 30rpx;


	}

	.titleStyleTitleNew {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: 560rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 30rpx 30rpx;


	}

	.titleStyleListElse {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 690rpx;
		height: 80rpx;
		background: #F9FCFF;
	}

	.titleStyleList {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #FFFFFF;
		width: 690rpx;
		height: 80rpx;

	}

	.titleStyleListElseNew {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 100%;
		height: 80rpx;
		background: #F9FCFF;
	}

	.titleStyleListNew {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #FFFFFF;
		width: 100%;
		height: 80rpx;

	}

	.titleStyle {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 690rpx;
		height: 80rpx;
		background: #0081FF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		margin-top: 42rpx
	}


	.titleStyleNew {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 100%;
		height: 80rpx;
		background: #0081FF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		margin-top: 42rpx
	}









	.contentCountTime {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
	}

	.contentCountTimeNew {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;

		white-space: nowrap;

		overflow-x: auto;
		display: -webkit-box;
		overflow-y: hidden;
	}

	::-webkit-scrollbar {
		display: none;
	}

	.line {
		margin-top: 24rpx;
		width: 60rpx;
		height: 4rpx;
		background: #0081FF;
		border-radius: 2rpx;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.activite {
		color: #0081FF;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;




	}

	.head-nav {

		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #CCCCCC;
		width: 100%;

	}

	.head-nav-line {

		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		color: #CCCCCC;
		width: 100%;



	}

	.head-nav-line1 {

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		color: #CCCCCC;
		width: 100%;



	}

	.SwitchTabOutInner {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 690rpx;
		/* background: #FFFFFF; */
		border-radius: 30rpx;
		margin-top: 30rpx;
	}

	.SwitchTabOut {

		display: flex;
		justify-content: center;
		align-items: center;

		/* background: #FFFFFF; */
		border-radius: 30rpx;

		margin-top: 30rpx;

	}


	.searchPickerText {

		margin-left: 20rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;

	}

	.searchPickerImg {
		width: 20rpx;
		height: 10rpx;
		margin-right: 20rpx;

	}

	.searchPickerContentBg {
		width: 330rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-right: 15rpx;
		margin-left: 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;


	}

	.searchPickerContent {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		margin-top: 30rpx;




	}
</style>
